<template>
  <div class="container">
    <!-- 关闭按钮 -->
    <div class="btnClose">
      <span class="iconfont iconicon-test"></span>
    </div>
    <!-- logo -->
    <div class="logo">
      <span class="iconfont iconnew"></span>
    </div>
    <Input
      type="text"
      tips="请输入你的用户名"
      :rule="/^.{6}$/"
      errMsg="请输入正确的用户名"
      @setValue="setusername"
    />
    <Input
      type="text"
      tips="请输入您的昵称"
      :rule="/^.{3,6}$/"
      errMsg="请输入合法的昵称"
      @setValue="setnickname"
    />
    <Input
      type="password"
      tips="请输入您的密码"
      :rule="/^\d{6,10}$/"
      errMsg="请输入正确的密码"
      @setValue="setpassword"
    />
    <LoginButton @RegisterBtn="Register" BtnType="注册" />
  </div>
  <!-- 输入框组件 -->
</template>

<script>
import { register } from "@/api/register";
import Input from "../components/Input";
import LoginButton from "../components/LoginButton";
export default {
  components: {
    Input,
    LoginButton,
  },
  data() {
    return {
      username: "",
      nickname: "",
      password: "",
    };
  },
  methods: {
    setusername(newValue) {
      this.username = newValue;
    },
    setnickname(newValue) {
      this.nickname = newValue;
    },
    setpassword(newValue) {
      this.password = newValue;
    },
    Register() {
      const data = {
        username: this.username,
        password: this.password,
        nickname: this.nickname,
      };
      register(data).then((res) => {
        if (res.data.message == "注册成功") {
          this.$toast.success("注册成功");
          setTimeout(() => {
            this.$router.push("./login");
          }, 800);
        } else {
          this.$toast.fail("注册失败");
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  height: 100vh;
  background-color: #f2f2f2;
  padding: 24/360 * 100vw;
  .btnClose {
    .iconicon-test {
      font-size: 28/360 * 100vw;
    }
  }
  .logo {
    text-align: center;
    .iconnew {
      font-size: 80/360 * 100vw;
      color: #d81e06;
    }
  }
}
.error {
  border-color: red;
}
</style>